<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI-3-菜单按钮</title>
<script type="text/javascript"
	src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript"
	src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css"
	href="/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css"
	href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
<script type="text/javascript">
	
	$(function(){
		
		//展现树形结构
		$("#easyui-tree").tree({
			url:"tree.json",		//加载远程JSON数据
			method:"get",			//请求方式  POST
			animate:true,			//表示显示折叠端口
			checkbox:true,			//表述复选框
			lines:true,				//表示显示连接线
			dnd:true,				//是否拖拽
			onClick:function(node){	//添加点击事件
				
				//当点击选项卡时进行页面跳转并且添加选项卡,如果选项卡已经打开则直接选中
				var tab = $("#main").tabs("getTab",node.text);
				if(tab){
					//如果不为空,则直接选中面板
					$("#main").tabs("select",node.text);
					
				}else{
					//如果没有选中则新增一个面板
					$('#main').tabs('add',{    
					    title:node.text,    
					    //content:'Tab Body',
					    href:"easyui-12-super"+(node.id%2==0?1:2)+".html",		//重远程加载页面
					    closable:true,    
					    tools:[{    
					        iconCls:'icon-mini-refresh',    
					        handler:function(){    
					            alert('refresh');    
					        }    
					    }]    
					});  	
				}
			}
		});	
		
		
		//定义通讯录
		$("#btn_1").click(function(){

			//定义弹出窗口
			$("#txl").window({
				title:"通讯录",
			    width:200,    
			    height:400,    
			    modal:true   
			});  
			
			//加载同学录树形结构
			$("#txlTree").tree({
				url:"friend.json",		//加载远程JSON数据
				method:"get",			//请求方式  POST
				animate:true,			//表示显示折叠端口
				checkbox:true,			//表述复选框
				lines:true,				//表示显示连接线
				dnd:true,				//是否拖拽
				onClick:function(node){	//添加点击事件
					alert(node.text);
				}
			});
			
			
		});
		
		//退出系统
		$("#btn_2").click(function(){
			$.messager.confirm('确认','你确定要退出系统吗？',function(r){    
			    if (r){    
			        alert('系统已经退出成功');    
			    }    
			});  
		})
	})


</script>
</head>
	<body class="easyui-layout">   
    <div data-options="region:'north',title:'标题',split:true" style="height:150px;">
    	<!--定义logo  -->
    	<div id="lol">
    		<img alt="英雄联盟" src="/easy-ui/images/lol.jpg" height="150px" width="150px">
    		
    		<!--定义退出按钮  -->
    		<div id="logout" style="float: right">
    			<a id="btn_1" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help'">通讯录</a> 
    			<a id="btn_2" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">退出</a>  
    		</div>
    	</div>
    	
    	
    </div>   
    <div data-options="region:'south',title:'底部 ',split:true" style="height:100px;"></div>   
    <div data-options="region:'east',iconCls:'icon-reload',title:'西侧',split:true" style="width:150px;"></div>   
    <div data-options="region:'west',title:'东侧',split:true" style="width:200px;">
    	<!--在左侧添加面板  -->
    	<div id="leftAccordion" class="easyui-accordion">   
		    <div title="课程管理" data-options="iconCls:'icon-save',selected:true" style="overflow:auto;padding:10px;">   
				
				<!--左侧菜单添加树形结构  -->
				<ul id="easyui-tree"></ul>
		    </div> 
		    <div title="院校管理" data-options="iconCls:'icon-reload'" style="padding:10px;">   
		       	院校信息 
		    </div>   
		    <div title="公关管理">   
		       	公关部你懂得
		    </div>   
		</div>  
    </div>   
    <div data-options="region:'center',title:'中心 '" style="padding:5px;background:#eee;">
    	<!--在中部定义选项卡面板  -->
    	<div id="main" class="easyui-tabs" data-options="fit:true">   
		    <div title="首页" style="padding:20px;">   
		        	<img alt="电竞王国" src="/easy-ui/images/timg.jpg">
		    </div>   
		</div>  
    </div>
    
    <!--定义通讯录弹出窗口  -->
    <div id="txl">
    	<ul id="txlTree"></ul>
    </div>   
</body>
</html>